import {Menu, Dropdown, Button, Icon} from 'antd';

const languageMap = {
  'en': 'English',
  'zh_cn': '简体中文',
  'ja': '日本語',
  'zh_tw': '繁體中文',
  'it_IT': 'Italiano'
};



export default (props)=>{
  const LangMenu = (
    <Menu selectedKeys={[props.language.langCode]} className="login-language-menu" onClick={props.onChange}>
      {
        Object.keys(languageMap).map(key=>{
          return <Menu.Item key={key}>{languageMap[key]}</Menu.Item>
        })
      }
    </Menu>
  );
  return (
    <div className={`language-btn-wrap ${props.prefix}`}>
      <Dropdown overlay={LangMenu}>
        <Button>
          {languageMap[props.language.code]}<Icon type="down" />
        </Button>
      </Dropdown>
    </div>
  )
}
